<template>
	<view class="content">
		<view class="topBox">
			<view>
				<h3>欢迎使用</h3>
				<h3>基站钉钉小程序</h3>
			</view>
			<view class="loader"></view>
		</view>
		<view class="inputBox">
			<view class="ipt">
				<h4>手机号</h4>
				<input type="text" disabled :value="user.phone" placeholder="请输入手机号码" />
			</view>
			<view class="ipt">
				<h4>昵称</h4>
				<input type="text" disabled :value="user.nickname" placeholder="请输入密码" />
			</view>
			<button :class="user.phone ? 'loginBtn' : 'loginBtnDisabled'" :disabled="!user.phone" @click="toIndex">
				<text v-if="user.phone">直接进入</text>
				<view v-else class="loader1"></view>
			</button>

			<view class="tipbox1">
				—— 已授权，可直接登录 ——
			</view>
			<view class="tipbox2">
				当前版本V0.08
			</view>

			<u-toast ref="toast"></u-toast>
			<u-loading-page :loading="loadingShow" loadingText="正在进入..."></u-loading-page>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				loadingShow: false
			}
		},
		async created() {
			if (!this.$store.state.token) {
				try {
					await this.$store.dispatch('login')
				} catch (err) {
					uni.showToast({
						title: err,
						type: 'error'
					})
				}
			}
			this.user = this.$store.state.user.user
		},
		methods: {
			toIndex() {
				if (!this.$store.state.user.permissions || !this.$store.state.user.permissions.includes('mini_login')) {
					return uni.showToast({
						title: '无小程序权限，请联系管理员配置',
						type: 'error'
					})
				}
				this.loadingShow = true
				setTimeout(() => {
					this.loadingShow = false
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		background-color: aquamarine;
		background: url("https://www.galaxyclub.cn/Upload/IMAGES/15/0615/38af439784544e95b7c64cad64a14157_650x650.jpg") no-repeat;
		background-size: cover;
	}

	.topBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 34rpx;
		color: #fff;
		padding: 80rpx 50rpx;
	}

	h3 {
		margin-bottom: 10rpx;
	}

	.inputBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 85vh;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding: 60rpx;
		box-sizing: border-box;
	}

	.ipt {
		margin-bottom: 50rpx;
	}

	.ipt h4 {
		margin-bottom: 40rpx;
		font-size: 40rpx;
		font-weight: 700;
		color: #333;
	}

	.ipt input {
		width: 100%;
		border-bottom: 1px solid #dedede;
		padding-bottom: 20rpx;
		font-size: 32rpx;
	}

	.loginBtn {
		margin-top: 100rpx;
		line-height: 85rpx;
		text-align: center;
		background: linear-gradient(to right, rgb(86, 104, 214), rgb(86, 104, 214));
		border-radius: 40rpx;
		color: #fff;
	}

	.loginBtnDisabled {
		margin-top: 100rpx;
		line-height: 85rpx;
		text-align: center;
		background: linear-gradient(to right, rgb(86, 104, 214), rgb(86, 104, 214));
		border-radius: 40rpx;
		color: #fff;
		opacity: 0.7;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loader1 {
		/* width: 10%; */
		height: 30%;
		aspect-ratio: 4;
		background: radial-gradient(circle closest-side, #fff 90%, #0000) 0/calc(100%/3) 100% space;
		clip-path: inset(0 100% 0 0);
		animation: l1 1s steps(4) infinite;
	}

	@keyframes l1 {
		to {
			clip-path: inset(0 -34% 0 0)
		}
	}

	.tipbox1 {
		margin-top: 50rpx;
		text-align: center;
		font-size: 30rpx;
		color: #bac8ff;
	}

	.tipbox2 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 80rpx;
		text-align: center;
		font-size: 26rpx;
		color: #dee2e6;
	}

	/* HTML: <div class="loader"></div> */
	.loader {
		--s: 25px;

		--_d: calc(0.353*var(--s));
		width: calc(var(--s) + var(--_d));
		aspect-ratio: 1;
		display: grid;
	}

	.loader:before,
	.loader:after {
		content: "";
		clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
		background:
			conic-gradient(from -90deg at var(--s) var(--_d),
				#fff 135deg, #666 0 270deg, #aaa 0);
		animation: l4 3.5s infinite;
	}

	.loader:before {
		z-index: 1;
		margin-bottom: calc(var(--_d)/-2 - 1px);
	}

	.loader:after {
		margin-top: calc(var(--_d)/-2 - 1px);
		animation-delay: 0.6s
	}

	@keyframes l4 {
		0% {
			transform: translate(0)
		}

		16.67% {
			transform: translate(-10px)
		}

		33.33% {
			transform: translate(10px)
		}

		50%,
		100% {
			transform: translate(0)
		}
	}
</style>